<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用的鼠标事件</title>
    <style>
        img {
            position: absolute;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    我是一段不愿意分享的文字
    <img src="../images/早上好.webp" alt="">
</body>
<script>
    // 第一个禁止右键，第二个禁止选中文字
    document.addEventListener('contextmenu',function(e){
        e.preventDefault()
    })
    document.addEventListener('selectstart',function(e){
        e.preventDefault()
    })
    document.addEventListener('click',function(e){
        console.log(e.clientX);
        console.log(e.clientY);
        console.log('*********************');
        console.log(e.pageX);
        console.log(e.pageY);
        console.log('************');
        console.log(e.screenX);
        console.log(e.screenY);
    })
    var img = document.querySelector('img')
    document.addEventListener('mousemove',function(e){
        // console.log(e.pageX);
        // console.log(e.pageY);
        var x = e.pageX
        var y = e.pageY
        img.style.left = x -50 +'px'
        img.style.top =y -50 + 'px'
    })
</script>
<!-- 
     阻止默认事件（了解）
contextmenu主要用于控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
selectstart开始选中禁止鼠标选中
onclick         鼠标点击
onmouseover     鼠标经过
onmouseout      鼠标离开
onfocus         获得焦点
onblur          失去焦点
onmousemove     鼠标移动
onmouseup       鼠标弹起
onmousedown     鼠标按下

e.clientX       返回相对于浏览器可视窗口的X坐标
e.clientY       返回相对于浏览器可视窗口的Y坐标
e.pageX         返回相对于文档页面的X坐标 IE9+ 支持
e.pageY         返回相对于文档页面的Y坐标 IE9+ 支持
e.screenX       返回相对于电脑屏幕的X坐标
e.screenY       返回相对于电脑屏幕的Y坐标
重点：page，了解：screen，
page是鼠标点击在页面文档的坐标，滑动到页面下面点击坐标会改变，
client是鼠标点击在可视区的坐标，滑动到页面下面点击坐标不会改变
 -->
</html>